<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/jspdemo/css/register.css">
    <title>表格验证</title>
</head>
<body>
<div>
    <form action="/jspdemo/registerServlet" method="get" id="reg-from">
    <table id="table_container">
        <th id="th_size" colspan="3">欢迎注册</th>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username" id="username">
                <br>
                <span id="username_err" class="err_meg" style="display: none" >此用户名不符合格式</span>
            </td>


        </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"  >
                    <br>
                <span id="pwd_err" class="err_meg" style="display: none">此密码不符合格式</span></td>

            </tr>

        <tr>
            <td>再次输入密码</td>
            <td><input type="password" name="password2" id="password2"  >
                <br>
                <span id="pwd2_err" class="err_meg" style="display: none">两次输入密码不一样</span></td>

        </tr>

        <tr>
            <td>手机号</td>
            <td><input type="text" name="telnum" id="tel">
                <br>
            <span id="tel_err" class="err_meg" style="display: none">此手机号不符合格式</span>
            </td>

        </tr>
        <tr>
            <td colspan="2" > <input type="submit" value="注    册" class="button"></td>
        </tr>
    </table>
        </form>
    <script>
        var usernameInput = document.getElementById("username");
        usernameInput.onblur = checkUsername;
        function checkUsername(){
            var username = usernameInput.value;
            var reg = /^\w{6,12}$/;
            var flag = reg.test(username);
            var une = document.getElementById("username_err");
            if (flag){
                une.style.display= 'none';
            }
            else {
                une.style.display='';
            }
            return flag;
        }

        var pwdInput = document.getElementById("password");
        pwdInput.onblur = checkPwd;
        function checkPwd(){
            var pwd = pwdInput.value;
            var reg = /^\w{9,12}$/;
            var flag = reg.test(pwd);
            var une = document.getElementById("pwd_err");
            if (flag){
                une.style.display= 'none';
            }
            else {
                une.style.display='';
            }
            return flag;

        }
        var pwd2Input = document.getElementById("password2");
        pwd2Input.onblur = checkPwd2;
        function checkPwd2(){
            var pwd = pwdInput.value;
            var pwd2 = pwd2Input.value;
            var flag = pwd2 == pwd;
            var une2 = document.getElementById("pwd2_err");
            if (flag){
                une2.style.display= 'none';
            }
            else {
                une2.style.display='';
            }
            return flag;

        }

        var telInput = document.getElementById("tel");
        telInput.onblur = checktel;
        function checktel(){
            var tel = telInput.value;
            var reg = /^\d{11}$/;
            var flag = reg.test(tel);
            var une = document.getElementById("tel_err");
            if (flag){
                une.style.display= 'none';
            }
            else {
                une.style.display='';
            }
            return flag;

        }
        var reg_from = document.getElementById("reg-from");
        reg_from.onsubmit = checkSubmit;
        var submit_rgs = document.getElementById("submit");
        submit_rgs.onmouseup = function (){
            submit_rgs.style.cursor = "pointer";
        }
        function checkSubmit(){
            var flag = checkUsername()&&checkPwd() && checktel() && checkPwd2();
            return flag;
        }

    </script>
</div>
</body>
</html>